<template>
  <van-skeleton title avatar :row="3" :loading="loading" style="width: 100%">
    <div class="goods_list">
      <div
        class="goods"
        v-for="item in shopList"
        :key="item.shop_id"
        @click="toDetail(item.shop_id)"
      >
        <div class="goods_img">
          <img :src="item.shop_img" alt="" lazyload />
        </div>
        <div class="goods_desc">
          {{ item.shop_dec }}
        </div>
        <div class="goods_tag">精选好物</div>
        <div class="goods_price">￥{{ item.shop_price }}</div>
      </div>
    </div>
  </van-skeleton>
</template>
<script setup>
import { defineProps, computed } from "vue";
import { useRouter } from "vue-router";

const props = defineProps({
  shopList: Array,
});
const loading = computed(() => {
  return props.shopList.length > 0 ? false : true;
});
const router = useRouter();
const toDetail = (id) => {
  router.push({ path: "/detail", query: { id: id } });
};
</script>
<style lang="scss" scoped>
.goods_list {
  display: flex;
  flex-wrap: wrap;
}

.goods {
  width: calc((100% - 20px) / 2);
  margin: 5px;
  height: 240px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;

  &_img {
    width: 100%;
    height: 130px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  &_desc {
    padding: 0 5px;
    text-align: left;
    margin-top: 5px;
    font-weight: bold;
    overflow: hidden; // 溢出隐藏
    text-overflow: ellipsis; // 溢出用省略号显示
    display: -webkit-box; // 作为弹性伸缩盒子模型显示。
    -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
    -webkit-line-clamp: 2; // 显示的行数
  }

  &_tag {
    padding: 0 5px;

    text-align: left;
    color: red;
    font-size: 12px;
    margin: 10px 0;
  }

  &_price {
    padding: 0 5px;
    text-align: left;
    color: red;
    font-weight: bold;
  }

  &_price::first-letter {
    font-size: 12px;
  }
}
</style>
